<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登陆</title>
    <style>
    body{
        margin:0;
    }
    .box{
        width:900px;
        height:50px;
        border: 1px solid #ccc;
        background-color: blue;
        margin:0 auto;
    }
    .box1{
        width:900px;
        height:50px;
        text-align: center;
        font-size: 30px;
        font-family:宋体;
    }
    .hz{
        width:600px;
        height:300px;
        border: 1px solid #ccc;
        margin:0 auto;
    }
    .hz1{
        margin-left:100px;
    }
   
    .hz3{
        
        margin-left:100px;
    }
    .hz4{
        width:300px;    
        height:100px;
        margin-left:100px;
    }
    .hz5{
     
        margin-top:-50px;
        margin-left:100px;
        text-align: center;
        width:300px;
        
    }
    .hz6{
        width:350px;
        height:50px;
        margin-top:30px;
        margin-left:100px;
    }
    .box{
        width:900px;
        height:50px;
        border: 1px solid #ccc;
        background-color: blue;
        margin:0 auto;
    }
    .box1{
        width:900px;
        height:50px;
        text-align: center;
        font-size: 30px;
        font-family:宋体;
    }
    .nm{ 
        width:600px;
        height:400px;
        border:1px solid #ccc;
        margin:0 auto;
    }
    .nm1{ 
        margin-left:100px;

    }
    .nm2{
        margin-left:70px;
    } 
    .nm3{
        margin-left:70px;
    }
    .nm4{
        margin-left:120px;    
    }
    .nm5{
        margin-left: 120px;
    }
    .nm6{ 
        margin-left:100px;
    }
    .nm7{
        margin-left:150px;
    }
    .nm8{
        text-align: center;
    }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">师徒课堂  欢迎登陆</div>
    </div>
    <br>
    <div class="hz">
        <div class="hz1">邮箱用户名已验证手机<br>
            <input type="text" style="width:300px">
        </div>
       
        <div class="hz3">密码<br>
            <input type="text" style="width:300px">
        </div>
       
        <div class="hz4">
            <from action="">
                <input type="radio" name="自动登陆" value="自动登陆">自动登陆
                <input type="radio" name="安全控件登陆" value="安全控件登录">安全控件登陆  忘记密码?
            </from>
        </div>
        <div class="hz5"> 
            <button type="button" style="width:300px">登陆</button>
        </div>
        <div class="hz6">使用合作网站登陆:<br>QQ|网易|人人|奇虎360|开心|豆瓣|搜狐|更多</div>
    </div>
    <br>
    <br>
    <br>
        <div class="box">
            <div class="box1">师徒课堂  欢迎注册</div>
        </div>
    <br>
    <div class="nm">
        <div class="nm1">账户名:
            <input type="text" style="width:300px">
        </div>
        <br>
        <div class="nm2">请设置密码:
                <input type="password" style="width:300px">
        </div>
        <br>
        <div class="nm3">请确认密码:
                <input type="password" style="width:300px">
        </div>
        <br>
        <div class="nm4">邮箱:
                <input type="text" style="width:300px">
        </div>
        <br>
        <div class="nm5">地址:
                <input type="text" style="width:300px">
        </div>
        <br>
        <br>
        <div class="nm6">
            <from action="">
                <input type="radio" name="我已阅读并同意" value="我已阅读并同意">我已阅读并同意《用户注册协议》
            </from>
        </div>
        <br>
        <br>
        <div class="nm7">
            <button type="button" style="width:300px">提交</button>
        </div>
        <div class="nm8">
                <a href="houtai.html" style="color:black;text-decoration: none;">后台管理系统</a>
                
        </div>
    </div>
   
</body>
</html>